import React, { useRef } from 'react';
import { Card, Button, Space, Breadcrumb, message, Modal } from 'antd';
import { HomeOutlined, InfoCircleOutlined, DownloadOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import ApplicationForm from './components/ApplicationForm';
import styles from './PreAcceptance.module.less';

// 添加接口定义
interface ApiResponse {
  success: boolean;
  message?: string;
}

// 模拟 API 调用
const submitApplication = async (values: any): Promise<ApiResponse> => {
  // TODO: 实现实际的 API 调用
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ success: true });
    }, 1000);
  });
};

const PreAcceptance: React.FC = () => {
  const navigate = useNavigate();
  const formRef = useRef<any>();

  const handleSubmit = () => {
    Modal.confirm({
      title: '确认提交',
      content: '确定要提交验收申请吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        try {
          const values = await formRef.current?.validateFields();
          // TODO: 调用接口提交表单
          const response = await submitApplication(values); // 假设这是提交API
          
          if (response.success) {
            message.success('提交成功！');
            navigate('/pre-acceptance/process');  // 成功后跳转
          } else {
            message.error(response.message || '提交失败，请重试！');
            // 失败时不跳转，保留表单数据
          }
        } catch (error) {
          message.error('提交失败，请检查表单内容！');
          // 表单验证失败，保留当前页面状态
        }
      }
    });
  };

  const handleSaveDraft = () => {
    Modal.confirm({
      title: '保存草稿',
      content: '确定要保存为草稿吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        try {
          const values = await formRef.current?.validateFields();
          // TODO: 调用接口保存草稿
          message.success('保存成功！');
        } catch (error) {
          message.error('保存失败，请重试！');
        }
      }
    });
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '档案预验收',
          },
          {
            title: '验收申请',
          }
        ]} />
      </div>

      <Card 
        title="验收申请" 
        className={styles.mainCard}
        extra={
          <Space>
            <Button onClick={handleSaveDraft}>保存草稿</Button>
            <Button type="primary" onClick={handleSubmit}>提交申请</Button>
          </Space>
        }
      >
        <div className={styles.customTip}>
          <div className={styles.tipHeader}>
            <InfoCircleOutlined />
            <span>温馨提示</span>
          </div>
          <ul className={styles.tipList}>
            <li>预审核材料提交后，相关人员将在一定时间内，进行审核</li>
            <li>
              上传档案附件，请参考
              <a href="#" className={styles.docLink}>
                <DownloadOutlined />《档案资料验收清单》
              </a>
              要求压缩上传
            </li>
            <li>上传的附件压缩包，系统将会自动检查相关目录，材料的齐备性</li>
          </ul>
        </div>
        <ApplicationForm ref={formRef} />
      </Card>
    </MainLayout>
  );
};

export default PreAcceptance; 